不定更新、可能爛尾XD
學習資源: W3Schools、其他網路資料
SVG 全名為 Scalable Vector Graphics 即"可縮放向量圖形",主要特點有這些 :
SVG 圖形可自由進行縮放而不影響圖形的品質
SVG 圖形可經由文字編輯器建立、編輯
SVG 是 W3C 的推薦標準
(除此之外 SVG 還有其他特點喔!)
再補充一下XML是什麼吧! XML 是以純文字為基礎的標記式語言(Markup Language),HTML也是一種標記式語言,但兩者間存在不少的差異,像是下面這些 :
<img>
就不用</img>
,但是 XML 需要<h1>
(無法自由調整定義),但 XML 沒有預先定義好的 element 名稱,可以設計自己想要的 element 名稱 (不過以xml
為名稱開頭的 element 還是有特殊意義喔!)
(空格),但 XML 只有 5 個預先定義好的字符名稱(<
、>
、&
、"
、'
)下面是 XML 的範例 (真的跟HTML很像,但有很多自定義的 element 名稱)
<part number="1976">
<name>Windscreen Wiper</name>
<description>The Windscreen wiper
automatically removes rain
from your windscreen, if it
should happen to splash there.
It has a rubber <ref part="1977">blade</ref>
which can be ordered separately
if you need to replace it.
</description>
</part>
(原始碼來源 : https://www.w3.org/standards/xml/core)
最後是 XML 的優點,主要有以下這些 :
<description>
就必須有</description>
,雖然這樣有點冗餘,但是電腦可以輕鬆抓出巢狀結構的錯誤如果要用 SVG 和 Canvas 各自繪製一個圓 :
SVG
<svg id="svgelem" height="200">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
Canvas
<canvas id="newCanvas" width="200" height="200"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(60, 60, 50, 0, 2 * Math.PI);
ctx.fillStyle = "green";
ctx.fill();
</script>
SVG | Canvas |
---|---|
向量圖 | 點陣圖 (pixel) |
圖形縮放均表現佳 | 圖形不適合放大 (失真) |
可透過 script、CSS 編輯 | 僅能透過 script 編輯 |
使用 XML 格式繪圖 | 使用 JavaScript 繪圖 |
支援事件處理器 | 不支援事件處理器 |
不適合繪製密集圖形 | 適合繪製密集圖形 |
初登場 : 2001年 | 初登場: 2004年 (Apple Inc.) |
ps. 可以對整個 Canvas 畫布註冊事件處理器,但個別的 element 不行
W3Schools SVG Tutorial
XML ESSENTIALS
WIKIPEDIA Canvas element
Difference between SVG and HTML 5 Canvas
HTML5(十)——Canvas 与 SVG 区别
SVG 與 HTML5 的 canvas 各有什麼優點,哪個更有前途?